import React, { Component, createRef } from 'react'

export default class App extends Component {
  constructor() {
    super()

    this.eleRef2 = createRef()

    this.eleRef3 = null
  }

  render() {
    return (
      <div>
        <h2 ref="eleRef">Hello React！！！</h2>

        <h2 ref={this.eleRef2}>Hello React！！！</h2>

        <h2 ref={args => this.eleRef3 = args}>Hello React！！！</h2>

        <hr />
        <button onClick={e => this.changeDomText()}>改变文本</button>
      </div>
    )
  }

  changeDomText() {
    //1.字符串形式绑定ref
    this.refs.eleRef.innerHTML = '字符串形式的refs'

    //2.对象形式绑定ref
    this.eleRef2.current.innerHTML = '对象形式的refs'

    //3.回调函数绑定ref
    this.eleRef3.innerHTML = '回调函数形式的refs'
  }
}
